/* eslint-disable jsx-a11y/alt-text */
import { useRef } from 'react';
import './m.css';
// import './mobile.css';
const Mobile = () => {
    const divBubbleRef = useRef(null);
    // useEffect(() => {
    //     addAnimation();
    // }, []);

    function addAnimation() {
        console.log(divBubbleRef.current);
        const b = Math.floor(Math.random() * 6) + 1;
        const bl = Math.floor(Math.random() * 11) + 1; // bl1~bl11
        let d = document.createElement('div');
        d.className = `bubble b${b} bl${bl}`;
        d.dataset.t = String(Date.now());
        divBubbleRef.current?.appendChild(d);
    }
    // setInterval(() => {
    //     addAnimation();
    // }, 300);
    const addEle = () => {
        addAnimation();
    };
    return (
        <div>
            <h1>移动端-主页</h1>
            <div ref={divBubbleRef} className="content_bubble" id="praise_bubble"></div>
            {/* <div ref={divBubbleRef} className="content-bubble">
                <div className="bubble b1"></div>
            </div> */}
            <button onClick={addEle}>点击效果</button>
        </div>
    );
};

export default Mobile;

// 参考地址：https://juejin.cn/post/6844904126476730375
